<template>
  <div id="mixed-form-con">
    <g-banner title="混合表单" des="结合了多种类型表单的示例"></g-banner>
    <a-affix :target="getScrollingCon">
      <div class="g-title-con">
        <h2 class="g-main-title pull-left">混合表单</h2>
        <div class="g-title-button pull-right">
          <el-button type="primary">保存</el-button>
          <el-button type="primary">提交</el-button>
          <el-button>返回</el-button>
        </div>
        <div class="clearfix"></div>
      </div>
    </a-affix>
    <div class="g-box">
      <div class="g-form-block" style="border-bottom: none;">
        <div class="g-form-title">基本信息</div>
        <table class="g-form-detail-item no-border">
          <tr>
            <td width="20%">会员身份</td>
            <td>个人</td>
          </tr>
          <tr>
            <td>会员ID</td>
            <td>447c31fc46c24f05bab6551c00e3ee8a</td>
          </tr>
        </table>
      </div>
      <el-form label-width="20%">
        <div class="g-form-block">
          <div class="g-form-title">业务信息</div>
          <el-form-item label="主要应用行业">
            <el-select class="g-input-width-large" v-model="form.mainBusiness">
              <el-option :value="'1'" :label="'政府行业'"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="主要行业应用" prop="industry">
            <el-select v-model="industry" placeholder="请选择分类" class="g-input-width-large">
              <el-option value="0" label="政府行业"></el-option>
              <el-option value="1" label="医疗行业"></el-option>
            </el-select>
            <el-checkbox-group v-model="form.industry" style="margin-top: 10px" class="g-checkbox">
              <el-checkbox label="市场监管" border class="label"></el-checkbox>
              <el-checkbox label="应急管理" border class="label"></el-checkbox>
              <el-checkbox label="自然资源" border class="label"></el-checkbox>
              <el-checkbox label="党政民生" border class="label"></el-checkbox>
              <el-checkbox label="空间大数据" border class="label"></el-checkbox>
              <el-checkbox label="人工智能" border class="label"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="收款账户">
            <el-input class="g-input-width-large" v-model="form.account">
              <el-select slot="prepend" v-model="form.accountType" style="width: 100px;">
                <el-option :value="'1'" :label="'微信'"></el-option>
                <el-option :value="'2'" :label="'支付宝'"></el-option>
                <el-option :value="'3'" :label="'银联'"></el-option>
              </el-select>
            </el-input>
          </el-form-item>
        </div>
        <div class="g-form-block">
          <div class="g-form-title">联系信息</div>
          <el-form-item label="国家/地区">
            <el-select class="g-input-width-large" v-model="form.nation">
              <el-option :value="'China'" :label="'中国'"></el-option>
              <el-option :value="'America'" :label="'美国'"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所在地区">
            <el-cascader v-model="form.region" :options="regionOptions"></el-cascader>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getScrollingCon } from '@/util/common'
export default {
  data() {
    return {
      form: {
        mainBusiness: '1',
        accountType: '1',
        account: '',
        nation: 'China',
        region: 'Shandong',
        industry: [],
      },
      regionOptions: [
        {
          value: 'Shandong',
          label: '山东',
          children: [
            {
              value: 'Jinan',
              label: '济南'
            }
          ]
        }
      ],
      industry: null
    }
  },
  methods: {
    getScrollingCon
  }
}
</script>